<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       .box{
           width: 450px;
           height: 300px;
           margin: auto;
           position: relative;
           margin-bottom: 15px;
           transition: all 14s;
       }
        img{
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
        }
        .box1{
            overflow: hidden;
            position: fixed;
            top:35%;
            right: 45%;
            cursor: pointer;

        }
        .yuan{
            width: 20px;
            height: 20px;
            background-color: #BABABA;
            border-radius: 50%;
            float: left;
            margin-right: 3px;

        }
    </style>
</head>
<body onload="yuan()">

    <div class="box">
        <img src="imgs/tu1.jpg" alt="haha" id="imgs1">
        <img src="imgs/tu2.jpg" alt="haha" id="imgs2">
        <img src="imgs/tu4.jpg" alt="haha" id="imgs3">
        <img src="imgs/tu5.jpg" alt="haha" id="imgs4">
        <img src="imgs/tu6.jpg" alt="haha" id="imgs5">
        <img src="imgs/tu7.jpg" alt="haha" id="imgs6">
    </div>
    <div class="box1">
        <div class="yuan" id="yuan1" onmouseover="yuan1()"></div>
        <div class="yuan" id="yuan2" onmouseover="yuan2()"></div>
        <div class="yuan" id="yuan3" onmouseover="yuan3()"></div>
        <div class="yuan" id="yuan4" onmouseover="yuan4()"></div>
        <div class="yuan" id="yuan5" onmouseover="yuan5()"></div>
        <div class="yuan" id="yuan6" onmouseover="yuan6()"></div>
    </div>
    <script>

        function yuan(){
            var ai=document.getElementsByClassName("box")[0],
                    bi=document.getElementsByClassName("box1")[0];
            ci(document.getElementsByClassName("box")[0].getElementsByTagName("img"));
        }
        var setin;var nuu=0;
        function ci(tu){
            setInterval( function() {
                for (var d = 0; d < tu.length; d++) {
                    if (d == nuu) {
                        tu[d].style.display = "inline-block";
                    }
                    else {
                        tu[d].style.display = "none";
                    }
                }
                nuu++;
                if (nuu == 5) {
                    nuu = 0;
                }
            } ,2000)
        }
        function yuan1(){
            document.getElementById("imgs1").style.display="inline-block";
            document.getElementById("imgs2").style.display="none";
            document.getElementById("imgs3").style.display="none";
            document.getElementById("imgs4").style.display="none";
            document.getElementById("imgs5").style.display="none";
            document.getElementById("imgs6").style.display="none";
        }
        function yuan2(){
            document.getElementById("imgs2").style.display="inline-block";
            document.getElementById("imgs1").style.display="none";
            document.getElementById("imgs3").style.display="none";
            document.getElementById("imgs4").style.display="none";
            document.getElementById("imgs5").style.display="none";
            document.getElementById("imgs6").style.display="none";
        }
        function yuan3(){
            document.getElementById("imgs1").style.display="none";
            document.getElementById("imgs2").style.display="none";
            document.getElementById("imgs3").style.display="inline-block";
            document.getElementById("imgs4").style.display="none";
            document.getElementById("imgs5").style.display="none";
            document.getElementById("imgs6").style.display="none";
        }
        function yuan4(){
            document.getElementById("imgs1").style.display="none";
            document.getElementById("imgs2").style.display="none";
            document.getElementById("imgs3").style.display="none";
            document.getElementById("imgs4").style.display="inline-block";
            document.getElementById("imgs5").style.display="none";
            document.getElementById("imgs6").style.display="none";
        }
        function yuan5(){
            document.getElementById("imgs1").style.display="none";
            document.getElementById("imgs2").style.display="none";
            document.getElementById("imgs3").style.display="none";
            document.getElementById("imgs4").style.display="none";
            document.getElementById("imgs5").style.display="inline-block";
            document.getElementById("imgs6").style.display="none";
        }
        function yuan6(){
            document.getElementById("imgs1").style.display="none";
            document.getElementById("imgs2").style.display="none";
            document.getElementById("imgs3").style.display="none";
            document.getElementById("imgs4").style.display="none";
            document.getElementById("imgs5").style.display="none";
            document.getElementById("imgs6").style.display="inline-block";
        }
    </script>
</body>
</html>